<!-- 条件渲染 -->
<template>
    <div>
        <input type="button" value="获取远程数据" @click="sendReq()">

        <div class="title">学生列表</div>
        <div class="thead">
            <div class="row bold">
                <div class="col">编号</div>
                <div class="col">姓名</div>
                <div class="col">性别</div>
                <div class="col">年龄</div>
            </div>
        </div>
        <div class="tbody">
            <div v-if="students.length > 0">
                <!-- :key="s.id"：唯一标识绑定 -->
                <div class="row" v-for="s of students" :key="s.id">
                    <div class="col">{{s.id}}</div>
                    <div class="col">{{s.name}}</div>
                    <div class="col">{{s.sex}}</div>
                    <div class="col">{{s.age}}</div>
                </div>
            </div>
            <!-- <div class="row" v-else><br/>暂无学生数据</div> -->
        </div>
    </div>
</template>
<script>
import axios from '../util/myaxios'
const options = {
    // 生命周期函数，此函数会在组件挂载后（准备就绪）被调用
    mounted: function () {
        this.sendReq()
    },
    // 定义数据
    data: function () {
        return {
            students: []
        }
    },
    // 定义方法
    methods: {
        //async 异步
        async sendReq() {
            const resp = await axios.get('/api/students')
            console.log(resp.data.data);
            this.students = resp.data.data;
        }
    }
}
export default options
</script>
<style scoped>
html,
div {
    font-family: 华文行楷;
    font-size: 20px;
}

.title {
    margin-bottom: 10px;
    font-size: 30px;
    color: #333;
    text-align: center;
}

.row {
    background-color: #fff;
    display: flex;
    justify-content: center;
}

.col {
    border: 1px solid #f0f0f0;
    width: 15%;
    height: 35px;
    text-align: center;
    line-height: 35px;
}

.bold .col {
    background-color: #f1f1f1;
}
</style>